<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>XXX管理系统</title>
		<!-- 公共头部 -->
		<%@ include file="/common/jsp/taglibs.jsp" %>
		<%@ include file="/common/jsp/headerScriptCss.jsp" %>
		<!-- 公共头部结束 -->
		<script type="text/javascript">
		//获取第一个三级菜单，并加载该菜单对应的页面   
		$(document).ready(function(){
			  var purviewUrl = $("#accordion li :first").attr("id");
			  if($.trim(purviewUrl)!=""){
				  $.get("${ctx}"+purviewUrl,
	                      function(data){
	                         $("#dynamticHtml").empty().append(data);
	                      });
			  }
		   });
		</script>	
	</head>
	<body>
		<!-- Container -->
		<div id="container">
		
			<!-- Header -->
			<div id="header">
				
				<!-- Top -->
				<div id="top">
					<!-- Logo -->
					<div class="logo"> 
						<a href="#" title="管理后台" class="tooltip">
						<img src="${ctx }/common/assets/logo.png" alt="管理后台" /></a> 
					</div>
					<!-- End of Logo -->
					
					<!-- Meta information -->
					<div class="meta">
						<p>欢迎, ${user.name }! <a href="#" title="1条来自Elly的私人信息!" class="tooltip">1 新信息!</a></p>
						<ul>
							<li><a href="${ctx }/index/logout" title="结束会话" class="tooltip"><span class="ui-icon ui-icon-power"></span>退出</a></li>
							<li><a href="#" title="改变当下设置" class="tooltip"><span class="ui-icon ui-icon-wrench"></span>设置</a></li>
							<li><a href="#" title="转到我的主页" class="tooltip"><span class="ui-icon ui-icon-person"></span>我的主页</a></li>
						</ul>	
					</div>
					<!-- End of Meta information -->
				</div>
				<!-- End of Top-->
			
				<!-- The navigation bar -->
				<div id="navbar">
					<ul class="nav">
					<c:forEach items="${firstPurviewList }" var="firstPurview">
                       <li>
                         <a href="${ctx }/index/${firstPurview.id}">
                            ${firstPurview.name }
                         </a>
                       </li>
                    </c:forEach>
					</ul>
				</div>
				<!-- End of navigation bar" -->			
			
			</div>
			<!-- End of Header -->
			
			<!-- Background wrapper -->
			<div id="bgwrap">
		
				<!-- Main Content -->
				<div id="content">
					<div id="main">
					<!-- 信息通知 -->
                        <div class="message success">
                          <h2>操作成功!</h2>
                          <p></p>
                        </div>
                        <div class="message warning">
                          <h2>警告,请注意!</h2>
                          <p></p>
                        </div>
                        <div class="message error">
                          <h2>操作失败!</h2>
                          <p></p>
                        </div>
                        <div class="message information">
                          <h2>信息提示!</h2>
                          <p></p>
                        </div>
                     <!-- 信息通知 结束-->
                 
                    <!-- 主体内容 -->
                    <div id="dynamticHtml">
                    </div>
                    <!-- 主体内容 -->
					</div>
				</div>
				<!-- End of Main Content -->
				
				<!-- Sidebar -->
				<div id="sidebar">
					<!-- Accordion -->
					<div id="accordion">
						 <c:forEach items="${secondPurviewList }" var="secondPurview">						   
						    <h3>							
                              <a href="javascript:void(0);"  class="tooltip">
                                   ${secondPurview.name }
                              </a>                          
					        </h3>						 
							<ul>
							   <c:forEach items="${thirdPurviewListMap[secondPurview.id]}"  var="thirdPurview">
							      <li><a id="${thirdPurview.url }" href="javascript:void(0);"  
							           onclick="hideNotifications();loadMainHtml('${thirdPurview.url }');">
							           ${thirdPurview.name }
							          </a>
							      </li>
							   </c:forEach>
							</ul>
						   
						 </c:forEach>
					</div>
					<!-- End of Accordion-->				
				</div>
				<!-- End of Sidebar -->
				
			</div>
			<!-- End of bgwrap -->
		</div>
		<!-- End of Container -->
		
		<!-- Footer -->
		<div id="footer">
			<p class="mid">
				<a href="#" title="Top" class="tooltip">返回顶部</a>&middot;<a href="#" title="主页" class="tooltip">主页</a>
			</p>
			<p class="mid">
				<!-- Change this to your own once purchased -->
				&copy; OAer 2014. All rights reserved.
				<!-- -->
			</p>
		</div>
		<!-- End of Footer -->


	</body>
</html>